<%--
  Created by IntelliJ IDEA.
  User: W
  Date: 2022/1/1
  Time: 22:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort();
%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>单人五子棋</title>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
        <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
            canvas {
                display: block;
                margin: 50px auto;
                background-color: sandybrown;
                /*box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;*/
            }
        </style>
        <script type="text/javascript">
            let isClicked = true;
            <%--let http_url = "<%=basePath%>/server/${clientID}";--%>
            <%--let socket_url = http_url.replace('http', 'ws');--%>
            // let socket;
            // let commandID = 0;
            // let isGaming = false;
            // let isHost = false;
            let isBlack = true;
            let chess = undefined;
            let context = undefined;
        </script>
        <script type="text/javascript">
            function drawChessBoard() {
                $('#board')[0].height = $('#board')[0].height;
                for (var i = 0; i < 15; i++) {
                    context.strokeStyle = "#D6D1D1";
                    context.moveTo(15 + i * 30, 15);//垂直方向画15根线，相距30px;
                    context.lineTo(15 + i * 30, 435);
                    context.stroke();
                    context.moveTo(15, 15 + i * 30);//水平方向画15根线，相距30px;棋盘为14*14；
                    context.lineTo(435, 15 + i * 30);
                    context.stroke();
                }
            }
            function oneStep(i, j, k) {
                context.beginPath();
                context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);//绘制棋子
                var g = context.createRadialGradient(15 + i * 30, 15 + j * 30, 13, 15 + i * 30, 15 + j * 30, 0);//设置渐变
                if (k) {    //k=true是黑棋，否则是白棋
                    g.addColorStop(0, '#0A0A0A');//黑棋
                    g.addColorStop(1, '#636766');
                } else {
                    g.addColorStop(0, '#D1D1D1');//白棋
                    g.addColorStop(1, '#F9F9F9');
                }
                context.fillStyle = g;
                context.fill();
                context.closePath();
            }
            $(function () {
                chess = document.getElementById("board");
                context = chess.getContext('2d');
                drawChessBoard();//绘制棋盘
                $(chess).click(function (e) {
                    if (!isClicked) {
                        return;
                    }
                    var x = e.offsetX;//相对于棋盘左上角的x坐标
                    var y = e.offsetY;//相对于棋盘左上角的y坐标
                    var i = Math.floor(x / 30);
                    var j = Math.floor(y / 30);
                    var color = isBlack ? 1 : 2;
                    $.ajax({
                        url: "<%=basePath%>/solo/drop/"+ color+ "/" + i + "/" + j,
                    }).success(function (data) {
                        data = JSON.parse(data);
                        if (data.status) {
                            oneStep(i, j, isBlack);
                            $.ajax({
                                url: "<%=basePath%>/solo/ai",
                            }).success(function (data) {
                                data = JSON.parse(data);
                                console.info(data);
                            });
                        } else {
                            console.log("错误的点击");
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="container" style="height: 100vh;">
            <div style="float:left">
                <canvas id="board" width="450px" height="450px"></canvas>
            </div>
        </div>
    </body>
</html>
